<!--  -->
<template>
  <div class="exam_container">
    <img src="../assets/images/cloud.png" class="cloud">
    <div class="block">
      <time-interval :start-time="600" class="timeinterval" :thresholds="[
      { color: '#FF9370', threshold: 0.5 },
      { color: '#FF1100', threshold: 0.25 }
    ]"></time-interval>

      <el-carousel htrigger="click" :autoplay="false" :loop="false" indicator-position="none" height="100%"
        arrow="never" @change="handlecarouselchange" ref="cardShow">
        <el-carousel-item v-for="(item,index) in questions" :key="index">
          <div class="question">
            <span v-if="item.questionType=='01'">[单选]</span>
            <span v-if="item.questionType=='02'">[多选]</span>
            <span v-if="item.questionType=='03'">[判断]</span>
            {{index+1}}.{{ item.questionContent }}</div>
          <div v-if="item.questionType!='02'">
            <el-radio v-model="questions[index].answer" v-for="(quesitem,quesindex) in item.lotteryAnswers"
              :key="quesindex" :label="quesitem.answerId">
              {{quesitem.answerContent}}
            </el-radio>
          </div>
          <el-checkbox-group v-model="questions[index].answer" v-else @change="handleCheckAllChange(index)">
            <el-checkbox v-for="(multiquesitem,multiquesindex) in item.lotteryAnswers" :key="multiquesindex"
              :label="multiquesitem.answerId">
              {{multiquesitem.answerContent}}
            </el-checkbox>
          </el-checkbox-group>
          <div class="solve_buttons">
            <img src="../assets/images/previous.png" v-show="index!=0" @click="arrowClick('left')">
            <img src="../assets/images/submit_button.png" v-show="index==questions.length-1" @click="showscore">
            <img src="../assets/images/next.png" v-show="index!=questions.length-1" @click="arrowClick('right',index)">
          </div>

        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
</template>

<script>
  import TimeInterval from "../components/TimeInterval.vue"
  import axios from "axios"
  import {
    post,
    fetch,
    patch,
    put
  } from '../assets/utils/axiosRequest'
  export default {
    data() {
      return {
        checkList: [],
        radio_answer: [],
        questions: [],
        usertime: 0,
        timer: "",
        baseUrl: ""
      };
    },
    created() {
      var that = this


      this.getExam()
    },
    components: {
      TimeInterval,
    },

    mounted() {
      var that = this

      this.timer = setInterval(() => {
        that.usertime++
      }, 1000);
    },
    destroyed() {
      clearInterval(this.timer)
    },
    computed: {},

    watch: {
      usertime(val, oldVal) {
        if (val == 600) {

          this.showscore("timeout")
        }
      }
    },
    methods: {
      arrowClick(val, index) {
        if (val === 'right') {
          if (this.questions[index].answer == "") {
            this.$message({
              message: '请先完成当前题目的作答',
              type: 'warning'
            });
          } else {
            this.$refs.cardShow.next()
          }

        } else {
          this.$refs.cardShow.prev()
        }
      },
      getExam() {
        let data = new FormData();
        var that = this
        var userIdentify = localStorage.getItem("WZTLUNIONID")
        data.append('eventId', '3');
        data.append('userIdentify', userIdentify);
        post("/gt-contest/contest/getQuestionList", data).then(res => {
          if (res.code == "000000") {
            var questions = res.result
            questions.map((item, index) => {
              // if (index == 0) {
              //   item.questionType = "02"
              // }
              if (item.questionType == "02") {
                that.$set(item, "answer", [])
                item.answer = []
              } else {
                that.$set(item, "answer", "")
              }
            })
            this.questions = questions
            this.$forceUpdate()
          }
        })

      },
      handlecarouselchange() {},
      handleCheckAllChange(val, index) {},
      showscore(iftimeout) {
        var that = this
        console.log(that.usertime)
        var answers = ""
        var multianswer = ""
        var ifall = true
        this.questions.map((item, index) => {
          if (item.answer == "" || item.answer.length == 0) {
            ifall = false
          }
        })
        console.log(ifall)
        if (ifall) {
          this.questions.map((item, index) => {
            if (item.questionType != "02") {
              if (index != this.questions.length - 1) {
                answers += item.questionId + "-" + item.answer + ","
              } else {
                answers += item.questionId + "-" + item.answer
              }
            } else {
              item.answer.map((multiansweritem, multianswerindex) => {
                if (multianswerindex != item.answer.length - 1) {
                  multianswer += multiansweritem + "#"
                } else {
                  multianswer += multiansweritem
                }
              })
              if (index != this.questions.length - 1) {
                answers += item.questionId + "-" + multianswer + ","
              } else {
                answers += item.questionId + "-" + multianswer
              }
            }
          })
          console.log(answers)
          let data = new FormData();
          var that = this
          var userIdentify = localStorage.getItem("WZTLUNIONID")
          data.append('eventId', '3');
          data.append('userIdentify', userIdentify);
          data.append('nickName', localStorage.getItem("nickName") || "用户");
          data.append('headPhoto', localStorage.getItem("headimgurl") || this.$store.state.headimgurl);
          data.append('answers', answers);
          post(
            "/gt-contest/contest/countScore",
            data).then(res => {
            console.log(res)
            this.$router.push({
              path: "/score",
              query: {
                usertime: res.result.timeCost,
                score: res.result.score
              }
            })
          })
        } else {
          if (iftimeout == "timeout") {
            this.$message({
              message: '时间到，停止作答',
              type: 'warning'
            });
            this.$router.push({
              path: "/"
            })
          } else {
            this.$message({
              message: '请你完成所有作答再提交',
              type: 'warning'
            });
          }
        }


      }
    }
  }
</script>
<style scoped lang="less">
  .el-carousel {
    height: 100%;
  }

  // /deep/.el-carousel__arrow--left {
  //   display: none !important;
  // }
  ::v-deep .el-radio__label,
  ::v-deep .el-checkbox__label {
    width: 100% !important;
    text-overflow: ellipsis;
    white-space: normal;
    line-height: 18px;
    // word-wrap: break-word !important;    无效
  }

  ::v-deep .el-checkbox__input {
    cursor: pointer;
    outline: 0;
    line-height: 1;
    vertical-align: top;
  }

  .exam_container {
    width: 100%;
    height: 100%;
    background: url('../assets/images/bg.png');
    background-size: 100% 100%;
    display: flex;
    align-items: center;

  }

  .block {
    width: 80%;
    height: 70%;
    margin: 0 auto;
    background: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    border-radius: 5px;
    position: relative;

    .timeinterval {
      position: absolute;
      background: white;
      border-radius: 100%;
      top: -30px;
      left: 50%;
      transform: translate(-50%);
    }
  }

  .el-carousel__item {
    display: flex;
    flex-direction: column;
    text-align: left;
    overflow: scroll;
  }

  .question {
    font-size: 15px;
    font-weight: bold;
    margin: 50px 20px 10px 20px;
  }

  .answer {
    margin: 10px 20px;
  }

  .cloud {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
  }

  .el-radio,
  .el-checkbox {
    width: 80%;
    margin: 10px 30px;
  }

  .el-radio.is-bordered+.el-radio.is-bordered,
  .el-checkbox.is-bordered+.el-checkbox.is-bordered {
    margin: 10px 30px;
  }

  .solve_buttons {
    display: flex;
    justify-content: space-evenly;
    align-items: center;

    img {
      width: 30%;
    }
  }
</style>